$(function() {
    // 获取layer方法
    let layer = layui.layer
    let form = layui.form


    // 调用渲染文章分类列表的函数
    initArtCateList()
        // 获取文章分类的列表
    function initArtCateList() {
        // 发起获取分类列表请求
        $.ajax({
            method: 'GET',
            url: '/my/article/cates',
            success: function(res) {
                if (res.status !== 0) {
                    return layer.msg('获取文章分类列表失败！')
                }
                // 调用模版引擎函数  template('模版结构id', 需要渲染的相关数据)
                var artHtml = template('tpl-table', res)
                    // 渲染分类列表内容
                $("#art_content").html(artHtml)

            }
        })

    }


    // 给添加别按钮绑定点击事件
    // 因为在确认添加时还需要关闭这个弹出窗口，所以在全局使用一个变量，用来把函数内的局部变量变为全局可用的变量
    var indexAdd = null
    $(".addCateBtn").click(function() {
            var dialogAdd = $("#dialog-add").html()
            indexAdd = layer.open({
                type: 1,
                title: '添加文章分类',
                // 引入在html页面中写的结构标签
                content: dialogAdd,
                area: ['500px', '250px'],
            });

        })
        // 确认添加按钮绑定事件
    $("body").on("submit", "#form-add", function(e) {
        e.preventDefault();
        let data = $(this).serialize()
        $.post('/my/article/addcates', data, function(res) {
            if (res.status !== 0) {
                return layer.msg("新增文章分类失败！")
            }
            layer.msg("新增文章分类成功！")
            initArtCateList()
            layer.close(indexAdd);
        })
    })


    // 给编辑按钮绑定点击事件  因为是动态生成的，所以通过事件委托来实现事件的绑定
    var indexCom = null
    $("#art_content").on("click", ".btnComplie", function() {
            // 获取id，通过id填充现有的文章类别
            const id = $(this).attr('data-id');
            // 发起ajax请求获得当前id所对应的内容，并利用layui的表单快速填充方法将内容填充到表单中去
            $.get('/my/article/cates/' + id, function(res) {
                form.val("formComplie", res.data);
            })


            // 弹出修改类别的窗口  
            // 获取到需要渲染到弹窗中的表单结构
            var dialogCom = $("#dialog-complie").html()
            indexCom = layer.open({
                type: 1,
                title: '修改文章分类',
                // 引入在html页面中写的结构标签
                content: dialogCom,
                area: ['500px', '250px'],
            });


        })
        // 表单提交修改的内容，发起请求 进行修改操作
    $("body").on("submit", "#form-complie", function(e) {
        // 阻止表单的默认行为  否则会自动跳转页面，并且消除之前在表单中添写的数据
        e.preventDefault()
            // 利用serialize方法获取到表单的数据
        let data = $(this).serialize()
            // 发起请求，对修改的内容进行更新
        $.ajax({
            method: 'POST',
            url: '/my/article/updatecate',
            data: data,
            success: function(res) {
                if (res.status !== 0) {
                    return layer.msg('更新分类信息失败！')
                }
                initArtCateList()
                layer.msg('更新分类信息成功！')
                layer.close(indexCom);
            }
        })
    })

    // 给动态生成的删除按钮绑定点击事件  删除文章分类
    $("#art_content").on('click', '.btnDelete', function() {
        // 获取文章分类的id
        const id = $(this).attr('data-id')

        layer.confirm('确定删除', { icon: 3, title: '提示' }, function(index) {
            //do something

            $.get('/my/article/deletecate/' + id, function(res) {
                if (res.status !== 0) {
                    return layer.msg('删除文章分类失败')
                }
            })
            layer.msg('删除文章分类成功')
            initArtCateList()
            layer.close(index);
        });
    })


})